<template>
	<view>
		<view class="gridWrap">
			<view class="gridTitle" v-if="showTitle">
				{{title}}
			</view>
			<view class="grid">
				<template v-if="col == 3">
					<view class="grid-item-3" v-for="(item, index) in dataList" :key="index" @tap="gridClick(item, index)" v-show="item.isShow">
						<image :src="item.imgUrl" mode=""></image>
						<view v-text="item.name"></view>
						<text v-if="showTip && item.tips" v-text="item.tips"></text>
					</view>
				</template>
				<template v-else-if="col == 4">
					<view class="grid-item-3" v-for="(item, index) in dataList" :key="index" @tap="gridClick(item, index)"  v-show="item.isShow">
						<image :src="item.imgUrl" mode=""></image>
						<view v-text="item.name"></view>
						<text v-if="showTip && item.tips" v-text="item.tips"></text>
					</view>
				</template>
			</view>
		</view>
		<!-- <view class="gridWrap">
			<view class="gridTitle">
				引用验单业务单据
			</view>
			<view class="grid">
		<template v-if="col == 3">
			<view class="grid-item-3" v-for="(item, index) in lyOrderList" :key="index" @tap="gridClick(item, index,0)">
				<image :src="item.imgUrl" mode=""></image>
				<view v-text="item.name"></view>
				<text v-if="showTip && item.tips" v-text="item.tips"></text>
			</view>
		</template>
		<template v-else-if="col == 4">
			<view class="grid-item-4" v-for="(item, index) in lyOrderList" :key="index" @tap="gridClick(item, index,1)">
				<image :src="item.imgUrl" mode=""></image>
				<view v-text="item.name"></view>
				<text v-if="showTip && item.tips" v-text="item.tips"></text>
			</view>
		</template>
		</view>
	</view> -->
  </view>
</template>

<script>
	export default{
		name: 'zy-grid',
		props: {
			col: {	//每行显示格子数，支持每行3个或4个(默认为3)
				type: Number,
				value: 3
			},
			showTip: {	//格子菜单的数字角标(默认显示)
				type: Boolean,
				value: true
			},
			title:{
				type:String ,
				value:"九宫格"
			},
			showTitle:{
				type: Boolean,
				value: true
			},
			dataList:{
				type:Array,
				value:[]
			}
		},
		created(){
			console.log(this.dataList)
		},
		data () {
			 return {
			// 	OrderOptionsList: [	//格子数据列表
			// 		{
			// 			name: '采购订单',
			// 			imgUrl: '../../static/zy-grid/grid-01.svg',
			// 			tips: 19
			// 		},
			// 		{
			// 			name: '采购入库单',
			// 			imgUrl: '../../static/zy-grid/grid-02.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '采购退货单',
			// 			imgUrl: '../../static/zy-grid/grid-03.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '销售订单',
			// 			imgUrl: '../../static/zy-grid/grid-04.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '销售入库单',
			// 			imgUrl: '../../static/zy-grid/grid-05.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '销售退货单',
			// 			imgUrl: '../../static/zy-grid/grid-06.svg',
			// 			tips: ''
			// 		}
			// 	],
			// 	lyOrderList: [	//格子数据列表
			// 		{
			// 			name: '调拨单',
			// 			imgUrl: '../../static/zy-grid/grid-01.svg',
			// 			tips: 19
			// 		},
			// 		{
			// 			name: '其他入库单',
			// 			imgUrl: '../../static/zy-grid/grid-02.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '其他出库单',
			// 			imgUrl: '../../static/zy-grid/grid-03.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '盘点单',
			// 			imgUrl: '../../static/zy-grid/grid-04.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '收款单',
			// 			imgUrl: '../../static/zy-grid/grid-05.svg',
			// 			tips: ''
			// 		},
			// 		{
			// 			name: '付款单',
			// 			imgUrl: '../../static/zy-grid/grid-06.svg',
			// 			tips: ''
			// 		}
			// 	]
			 }
		},
		methods:{
			gridClick (item, index) {	//格子菜单点击事件
					uni.navigateTo({
						url:item.url
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		background: #ebebeb;
	}
	.gridWrap{
	    background: #FFF;
		margin: 20upx;
		border-radius: 10upx;
		.gridTitle{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			padding-left: 20upx;
			font-size: 16px;
		}
	}

	.grid{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background: #FFF;
		border-radius: 10upx;
		box-sizing: border-box;
		border-top: 2upx solid rgba(172,172,172,.2);
		
		.grid-item-3,.grid-item-4{
			box-sizing: border-box;
			width: calc(100% / 3);
			border-bottom: 2upx solid rgba(172,172,172,.2);
			border-right: 2upx solid rgba(172,172,172,.2);
			text-align: center;
			padding: 50upx 0;
			position: relative;
			image{
				width: 48upx;
				height: 48upx;
				position: absolute;
				left: 50%;
				margin-left: -24upx;
			}
			view{
				font-size: 24upx;
				margin-top: 70upx;
				color: rgba(0,0,0,.53);
				
			}
			text{
				display: block;
				padding: 4upx 8upx;
				text-align: center;
				border-radius: 36upx;
				font-size: 22upx;
				background-color: rgba(255,82,65,1);
				color: rgba(255,255,255,1);
				position: absolute;
				right: 6upx;
				top: 6upx;
			}
		}
		.grid-item-3:nth-child(3n + 3),.grid-item-4:nth-child(4n + 4){
			border-right: none;
		}
		.grid-item-4{
			width: calc(100% / 4);
		}
		
	}
</style>
